<template>
  <div class="leftbar">
    <div
      v-for="item in arr1"
      :class="item.class"
      :key="item.id"
      @click="tiaozhuan(item.id)"
      class="box1"
    >
      <div class="tubiao"></div>
      <div class="box">
        {{ item.name }}<span v-if="item.id == 4 || item.id == 6">></span>
        <div v-if="item.id == 4" class="duoyu1"><duoyu1 /></div>
        <div v-if="item.id == 6" class="duoyu2"><duoyu2 /></div>
      </div>
    </div>
    <div class="xian"></div>
    <div
      v-for="item in arr2"
      :class="item.class"
      :key="item.id"
      @click="tiaozhuan(item.id)"
      class="box1"
    >
      <div class="tubiao"></div>
      <div class="box">{{ item.name }}</div>
    </div>
    <div class="all" @click="caidan">全部菜谱分类</div>
  </div>
</template>

<script>
import duoyu1 from "./components/duoyu1.vue";
import duoyu2 from "./components/duoyu2.vue";

export default {
  components: { duoyu1, duoyu2 },
  data() {
    return {
      arr1: [
        { name: "家常菜", class: "a0", id: 0 },
        { name: "快手菜", class: "a1", id: 1 },
        { name: "下饭菜", class: "a2", id: 2 },
        { name: "早餐", class: "a3", id: 3 },
        { name: "肉", class: "a4", id: 4 },
        { name: "鱼", class: "a5", id: 5 },
        { name: "蔬菜", class: "a6", id: 6 },
        { name: "鸡蛋", class: "a7", id: 7 },
        { name: "汤羹", class: "a8", id: 8 },
        { name: "烘焙", class: "a9", id: 9 },
        { name: "主食", class: "a10", id: 10 },
        { name: "面", class: "a11", id: 11 },
        { name: "素食", class: "a12", id: 12 },
      ],
      arr2: [
        { name: "孕妇", class: "a13", id: 13 },
        { name: "产妇", class: "a14", id: 14 },
        { name: "婴儿", class: "a15", id: 15 },
        { name: "儿童", class: "a16", id: 16 },
      ],
    };
  },
  methods: {
    tiaozhuan(id) {
      if (id <= 3) {
        this.$router.push({
          path: `/caidan/centernew`,
        });
      }
      if (id > 3) {
        this.$router.push({
          path: `/caidan/centerpop`,
        });
      }
    },
    zhankai() {},

    caidan() {
      this.$router.push({
        path: `/caidan/centercf101`,
      });
    },
  },
};
</script>

<style scoped="scoped">
* {
  margin: 0px;
  padding: 0px;
}
.leftbar {
  width: 175px;
  padding-right: 40px;
  margin-bottom: 32px;
  font-size: 14px;
  /* background-color: pink; */
}
.box1 {
  width: 140px;
  cursor: pointer;
}
.tubiao {
  background-image: url(../img/tubiao.png);
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 2px;
}
.xian {
  width: 130px;
  height: 1px;
  background-color: black;
  opacity: 0.1;
}
.box {
  /* width: 50px; */
  height: 32px;
  margin-bottom: 10px;
  margin-left: 50px;
  margin-top: 13px;
  line-height: 36px;
  position: relative;
}
.box:hover {
  color: orangered;
}
.box span {
  position: absolute;
  right: 10px;
  top: -2px;
  opacity: 0.5;
  font-size: 16px;
  color: black;
}
.duoyu1 {
  width: 403px;
  height: 370px;
  background-color: rgb(245, 246, 245);
  position: absolute;
  z-index: 99;
  left: 87px;
  top: -2px;
  display: none;
}
.duoyu2 {
  width: 403px;
  height: 310px;
  background-color: rgb(245, 246, 245);
  position: absolute;
  z-index: 99;
  left: 87px;
  top: -2px;
  display: none;
}
.a4:hover > .box > .duoyu1 {
  display: block;
}
.a6:hover > .box > .duoyu2 {
  display: block;
}
.all {
  cursor: pointer;
  width: 97px;
  color: #dd3915;
  font-size: 16px;
  margin-top: 30px;
}
.all:hover {
  background-color: #dd3915;
  color: white;
}
.a1 .tubiao {
  background-position-y: -40px;
}
.a2 .tubiao {
  background-position-y: -80px;
}
.a3 .tubiao {
  background-position-y: -122px;
}
.a4 .tubiao {
  background-position-y: -160px;
}
.a5 .tubiao {
  background-position-y: -200px;
}
.a6 .tubiao {
  background-position-y: -240px;
}
.a7 .tubiao {
  background-position-y: -280px;
}
.a8 .tubiao {
  background-position-y: -320px;
}
.a9 .tubiao {
  background-position-y: -360px;
}
.a10 .tubiao {
  background-position-y: -400px;
}
.a11 .tubiao {
  background-position-y: -440px;
}
.a12 .tubiao {
  background-position-y: -480px;
}
.a13 .tubiao {
  background-position-y: -560px;
}
.a14 .tubiao {
  background-position-y: -600px;
}
.a15 .tubiao {
  background-position-y: -640px;
}
.a16 .tubiao {
  background-position-y: -680px;
}
</style>